<template>
  <div class="page-container">
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>通用促销</el-breadcrumb-item>
        <el-breadcrumb-item>赠送类促销</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar" >
      <el-form :inline="true" :model="filters" :size="size" ref="filters" :rules="filtersRules">
        <el-row class="times">
            <el-form-item label="活动时间：" prop="startTime">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                class="input_postion w211"
                clearable
                @change="changeStartDate"
                :picker-options="startDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
                class="input_postion w211"
                clearable
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="creatorNameForSearch" label="创建人：">
              <el-input v-model="filters.creatorNameForSearch" placeholder="创建人" clearable maxlength="80"></el-input>
            </el-form-item>
        </el-row>
        <el-row class="search-input">
          <el-form-item prop="promName" label="活动名称：">
            <el-input v-model="filters.promName" placeholder="活动名称" clearable maxlength="80"></el-input>
          </el-form-item>
          <el-form-item prop="promotionCode" label="活动ID：">
            <el-input v-model="filters.promotionCode" placeholder="活动ID" clearable maxlength="80"></el-input>
          </el-form-item>
          <el-form-item prop="frontPromType" label="活动类型：" clearable>
            <el-select v-model="filters.frontPromType" placeholder="全部" clearable>
              <el-option
                v-for="item in frontPromTypes"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button :label="$t('action.reset')" class="resetButton" icon="el-icon-refresh" @click="resetForm('filters')" />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="el-icon-search" label="搜索"
              @click="getPromotionList()"
              class="searchButton"
            />
          </el-form-item>
          <el-form-item>
            <kt-button label="创建活动" @click="createPage()" class="searchButton" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tab-container">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="item in tabMapOptions"
          :key="item.key"
          :label="item.label"
          :name="item.key"
        >
<!--          <keep-alive>-->
            <tab-pane
              v-if="activeName==item.key"
              :type="item.key"
              ref="child"
              :parentFilters="filters"
              v-on:SecondSell="SecondSell"
            />
<!--          </keep-alive>-->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import marketRequest from "@/market/request/marketRequest";
  import {
    front_prom_types,
    chanel_codes,
    prom_types
  } from "@/market/dict/marketDict";
  import KtButton from "@/views/Core/KtButton";
  import { format } from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { darkmagenta } from "color-name";
  import tabPane from "./components/TabPaneGift";
  export default {
    name: "Tab",
    components: {
      tabPane,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      var checkStartTime = (rule, value, callback) => {
        if(value == null || typeof(value)=="undefined"){
          callback();
        }
        if(this.filters.endTime == null || typeof(this.filters.endTime)=="undefined"){
          callback();
        }
        if(new Date(value).getTime() > new Date(this.filters.endTime).getTime()) {
          callback(new Error('开始时间不能大于结束时间'));
        }
        this.$refs.filters.clearValidate('endTime');
        callback();
      };
      var checkEndTime = (rule, value, callback) => {
        if(value == null || typeof(value)=="undefined"){
          callback();
        }
        if(this.filters.startTime == null || typeof(this.filters.startTime)=="undefined"){
          callback();
        }
        if(new Date(value).getTime() < new Date(this.filters.startTime).getTime()) {
          callback(new Error('结束时间不能小于开始时间'));
        }
        this.$refs.filters.clearValidate('startTime');
        callback();
      };
      var checkId = (rule, value, callback) => {
        if(value == null || typeof(value)=="undefined"  || value == ''){
          callback();
        }
        var reg = /^[1-9]\d*$/;
        if(!reg.test(value)) {
          callback(new Error('请输入数字'));
        }
        callback();
      };
      return {
        channelOption:[],
        dataFormRules:{
          //templateName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
        },
        tableData: [],
        templateTableDataSize:0,
        dataForm: {
          id: null,
          promType: 5,  //赠送
          templateName: null,
          limit:10,
          start:1,
        },
        useTempDialogVisible: false,
        flag: false,
        form: {
          region: ""
        },
        option1: 1,
        option1: 2,
        option1: 3,
        tabMapOptions: [
          { label: "全部", key: "-1" },
          { label: "待提交", key: "1" },
          { label: "待审核", key: "2" },
          { label: "未开始", key: "3" },
          { label: "进行中", key: "4" },
          { label: "已结束", key: "5" },
          { label: "已关闭", key: "6" },
          { label: "已过期", key: "7" },
          { label: "审核未通过", key: "8" },
          { label: "活动草稿", key: "9" },
        ],
        activeName: "-1",
        createdTimes: 0,
        size: "small",
        filtersRules: {
            // promName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
            // creatorNameForSearch: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
            startTime: [
              {  validator:checkStartTime, trigger: 'change' }
            ],
            endTime: [
              {   validator:checkEndTime, trigger: 'change' }
            ],
          },
        filters: {
          promName: null,
          promotionCode: null,
          id: "",
          promType: 5,
          channelCode: "",
          activityType: "",
          merchantId: "",
          creatorNameForSearch: null,
          startTime: "",
          endTime: "",
          storeId: "",
          type: "",
          frontPromType: "",
          t: "sysConfig",
          queryname: "",
          promotionCode: '',
        },
        frontPromTypes: this.getFrntPromType(),
        promTypes: 5,
        channelCodes: chanel_codes,
        activityTypes: [
          { activityType: "", label: "请选择" },
          { activityType: "0", label: "自建" },
          { activityType: "1", label: "报名" }
        ],
        merchantIds: [{ merchantId: null, label: "请选择" }],
        storeIds: [{ storeId: null, label: "请选择" }],
        startDateDisabled: {},//开始时间限制
        endDateDisabled: {},//结束时间限制
      };
    },
    methods: {
      changeStartDate: function() {
        var this_ = this;
        this_.endDateDisabled = {
          disabledDate: time => {
            if (this_.filters.startTime) {
              return time.getTime() <= new Date(this_.filters.startTime).getTime();
            }
          }
        };
      },
      changeEndDate: function() {
        var this_ = this;
        this_.startDateDisabled = {
          disabledDate: time => {
            if (this_.filters.endTime) {
              return time.getTime() >= new Date(this_.filters.endTime).getTime();
            }
          }
        };
      },

      handleSizeChangeForTemplate(pageNum){
        this.dataForm.limit = pageNum;
        this.tempPageQuery();
      },
      handleCurrentChangeForTemplate(pageSize){
        this.dataForm.limit = 1;
        this.dataForm.start = pageSize;
        this.tempPageQuery();
      },
      getFrntPromType: function(row, column, cellValue, index) {
        return front_prom_types.filter((e)=>{
          return e.code == 'gift_front_prom_type';
        });
      },
      // 时间格式化
      dateFormat: function(row, column, cellValue, index) {
        return format(row[column.property]);
      },

      resetForm(formName) {


        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
        }
        this.$refs.child[0].listQuery.pageNo = 1;
        this.$refs.child[0].getList();
      },
      createPage() {
        //this.$router.push("/CreateHandsel" + "?auth=0");
        this.$router.push("/GiftPromotionCreate" + "?auth=0&active=1");
        // this.$router.push("/CreatePromotion"+"?auth=1");
      },
      getPromotionList() {
        this.$refs.child[0].listQuery.pageNo = 1;
        this.$refs.child[0].getList();
      },
      SecondSell() {
        this.flag = true;
      }
    },
    watch: {
      activeName(val) {
        this.$router.push(`${this.$route.path}?tab=${val}`);
      }
    },
    created() {
      // init the default selected tab
      //this.frontPromTypes = front_prom_types;
      const tab = this.$route.query.tab;
      if (tab) {
        this.activeName = tab;
      }
    },
    mounted() {}
  };
</script>

<style scoped lang="scss">
.search-input{
  .times{
    .w211{
  width: 211px !important;
  /deep/ .el-input__inner{
    width: 211px !important;
  }
}
  }
}

</style>
